<template>
  <view class="settings-container">
    <!-- 顶部导航栏 -->
    <view class="settings-header">
      <text class="title">设置</text>
    </view>

    <!-- 账号设置 -->
    <view class="settings-section">
      <view class="section-title">账号设置</view>
      <view class="setting-item" @click="navigateTo('account')">
        <uni-icons type="contact" size="18" color="#666"></uni-icons>
        <text>账号与安全</text>
        <uni-icons type="forward" size="16" color="#999"></uni-icons>
      </view>
      <view class="setting-item" @click="navigateTo('privacy')">
        <uni-icons type="locked" size="18" color="#666"></uni-icons>
        <text>隐私设置</text>
        <uni-icons type="forward" size="16" color="#999"></uni-icons>
      </view>
      <view class="setting-item" @click="navigateTo('notification')">
        <uni-icons type="notification" size="18" color="#666"></uni-icons>
        <text>通知设置</text>
        <uni-icons type="forward" size="16" color="#999"></uni-icons>
      </view>
    </view>

    <!-- 通用设置 -->
    <view class="settings-section">
      <view class="section-title">通用设置</view>
      <view class="setting-item" @click="navigateTo('theme')">
        <uni-icons type="color" size="18" color="#666"></uni-icons>
        <text>主题设置</text>
        <text class="current-theme">{{currentTheme}}</text>
        <uni-icons type="forward" size="16" color="#999"></uni-icons>
      </view>
      <view class="setting-item" @click="navigateTo('language')">
        <uni-icons type="chatboxes" size="18" color="#666"></uni-icons>
        <text>语言设置</text>
        <text class="current-language">{{currentLanguage}}</text>
        <uni-icons type="forward" size="16" color="#999"></uni-icons>
      </view>
      <view class="setting-item" @click="navigateTo('font')">
        <uni-icons type="font" size="18" color="#666"></uni-icons>
        <text>字体大小</text>
        <text class="current-font">{{currentFontSize}}</text>
        <uni-icons type="forward" size="16" color="#999"></uni-icons>
      </view>
    </view>

    <!-- 数据与存储 -->
    <view class="settings-section">
      <view class="section-title">数据与存储</view>
      <view class="setting-item" @click="clearCache">
        <uni-icons type="trash" size="18" color="#666"></uni-icons>
        <text>清除缓存</text>
        <text class="cache-size">{{cacheSize}}</text>
        <uni-icons type="forward" size="16" color="#999"></uni-icons>
      </view>
      <view class="setting-item" @click="navigateTo('backup')">
        <uni-icons type="cloud-upload" size="18" color="#666"></uni-icons>
        <text>数据备份</text>
        <text class="backup-time">{{lastBackupTime || '未备份'}}</text>
        <uni-icons type="forward" size="16" color="#999"></uni-icons>
      </view>
      <view class="setting-item" @click="navigateTo('storage')">
        <uni-icons type="gear" size="18" color="#666"></uni-icons>
        <text>存储管理</text>
        <uni-icons type="forward" size="16" color="#999"></uni-icons>
      </view>
    </view>

    <!-- 关于与帮助 -->
    <view class="settings-section">
      <view class="section-title">关于与帮助</view>
      <view class="setting-item" @click="navigateTo('about')">
        <uni-icons type="info" size="18" color="#666"></uni-icons>
        <text>关于我们</text>
        <text class="version">v{{version}}</text>
        <uni-icons type="forward" size="16" color="#999"></uni-icons>
      </view>
      <view class="setting-item" @click="navigateTo('feedback')">
        <uni-icons type="help" size="18" color="#666"></uni-icons>
        <text>意见反馈</text>
        <uni-icons type="forward" size="16" color="#999"></uni-icons>
      </view>
      <view class="setting-item" @click="navigateTo('help')">
        <uni-icons type="staff" size="18" color="#666"></uni-icons>
        <text>帮助中心</text>
        <uni-icons type="forward" size="16" color="#999"></uni-icons>
      </view>
    </view>

    <!-- 退出登录按钮 -->
    <view class="logout-btn" @click="logout">
      <text>退出登录</text>
    </view>

    <!-- 清除缓存确认弹窗 -->
    <uni-popup ref="clearCachePopup" type="dialog">
      <uni-popup-dialog 
        type="warn" 
        title="清除缓存" 
        content="确定要清除所有缓存数据吗？" 
        :duration="2000" 
        :before-close="true" 
        @confirm="confirmClearCache" 
        @close="closeClearCachePopup"
      ></uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTheme: '默认主题',
      currentLanguage: '简体中文',
      currentFontSize: '中',
      cacheSize: '15.6MB',
      lastBackupTime: '2023-06-15',
      version: '1.2.0'
    }
  },
  methods: {
    navigateTo(page) {
      const routes = {
        'account': '/pages/settings/account',
        'privacy': '/pages/settings/privacy',
        'notification': '/pages/settings/notification',
        'theme': '/pages/settings/theme',
        'language': '/pages/settings/language',
        'font': '/pages/settings/font',
        'backup': '/pages/settings/backup',
        'storage': '/pages/settings/storage',
        'about': '/pages/settings/about',
        'feedback': '/pages/settings/feedback',
        'help': '/pages/settings/help'
      }
      uni.navigateTo({ url: routes[page] })
    },
    clearCache() {
      this.$refs.clearCachePopup.open()
    },
    closeClearCachePopup() {
      this.$refs.clearCachePopup.close()
    },
    confirmClearCache() {
      // 模拟清除缓存
      this.cacheSize = '0MB'
      uni.showToast({ title: '缓存已清除', icon: 'success' })
      this.$refs.clearCachePopup.close()
    },
    logout() {
      uni.showModal({
        title: '退出登录',
        content: '确定要退出当前账号吗？',
        success: (res) => {
          if (res.confirm) {
            // 这里应该调用API注销登录状态
            uni.reLaunch({ url: '/pages/login/login' })
          }
        }
      })
    }
  }
}
</script>

<style lang="scss">
.settings-container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 30px;
}

.settings-header {
  padding: 15px;
  
  .title {
    font-size: 20px;
    font-weight: bold;
    color: #333;
  }
}

.settings-section {
  background-color: #fff;
  border-radius: 10px;
  margin: 15px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  
  .section-title {
    padding: 15px;
    font-size: 14px;
    color: #999;
    border-bottom: 1px solid #f0f0f0;
  }
  
  .setting-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    .uni-icons:first-child {
      margin-right: 10px;
    }
    
    text {
      flex: 1;
      font-size: 15px;
      color: #333;
    }
    
    .current-theme,
    .current-language,
    .current-font,
    .cache-size,
    .backup-time,
    .version {
      font-size: 13px;
      color: #999;
      margin-right: 5px;
    }
  }
}

.logout-btn {
  margin: 20px 15px 0;
  background-color: #fff;
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  font-size: 16px;
  color: #FF6B6B;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
</style>